<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="已完成的项目" name="finish"></el-tab-pane>
    <el-tab-pane label="进行中的项目" name="unfinish"></el-tab-pane>
    <el-tab-pane label="申请中的项目" name="apply"></el-tab-pane>
  </el-tabs>


    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
      <el-table-column align="center" prop="proName" label="项目名称" >
      </el-table-column>
      <el-table-column align="center" prop="proContent" label="项目描述" >
      </el-table-column>
      <el-table-column align="center" prop="userName" label="项目发起人">
      </el-table-column>
      <el-table-column align="center" prop="proCost" label="项目成本">
      </el-table-column>
      <el-table-column align="center" prop="proResource" label="项目资源">
      </el-table-column>
      <el-table-column align="center" prop="proTime" label="项目起始时间">
      </el-table-column>
      <!-- <el-table-column align="center" prop="process" label="项目进度">
      </el-table-column> -->
      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
        <el-button type="danger"  size="small" @click="pauseProject(scope.$index)" v-if="listQuery.state == '进行中'&scope.row.stateGoing=='0'"><svg-icon icon-class="pause"></svg-icon>暂停项目</el-button>
        <el-button type="success" size="small" @click="startProject(scope.$index)" v-if="listQuery.state == '进行中'&scope.row.stateGoing=='1'"><svg-icon icon-class="start"></svg-icon>开始项目</el-button>
        <el-button type="primary" size="small" @click="showProject(scope.$index)"  v-if="listQuery.state == '已完成'">查看项目</el-button>
        <el-button type="primary" size="small" @click="changeApplyProject(scope.$index)" v-if="listQuery.state == '未进行'">修改申请项目</el-button>
        <el-button type="success" size="small" @click="completeProject(scope.$index)" v-if="listQuery.state == '进行中'"><svg-icon icon-class="complete"></svg-icon>项目完成</el-button>
      </template>
      </el-table-column>
    </el-table>


  <div class="block">    
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>



    <el-dialog :title="title[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form class="small-space"  label-position="left" label-width="100px"
              style='width: 600px; margin-left:50px;'>
        <el-form-item label="项目名称">
          <el-input type="text" v-model="projectData.proName">
          </el-input>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="text" v-model="projectData.proContent">
          </el-input>
        </el-form-item>
        <el-form-item label="项目发起人"  v-if="dialogStatus=='showProject'">
          <el-input type="text" v-model="projectData.userName">
          </el-input>
        </el-form-item>
        <el-form-item label="项目成本">
          <el-input type="text" v-model="projectData.proCost">
          </el-input>
        </el-form-item>
        <el-form-item label="项目资源">
          <el-input type="text" v-model="projectData.proResource">
          </el-input>
        </el-form-item>
        <el-form-item label="项目起始时间" v-if="dialogStatus=='showProject'">
          <el-input type="text" v-model="projectData.proTime">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="success" @click="updateApplyProject" v-if="dialogStatus=='updateProject'">修改</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import global from '../../Global'

  export default {
    data() {
      return {
        title: {
          showProject:'查看项目',
          updateProject: '修改项目'
        },
        dialogStatus: 'showProject',
        list:[],//表格数据
        activeName: 'unfinish',
        stateGoing: 0,//于scope的stateGoing不同
        listQuery: {
          pageNum: 1,//页码
          pageRow: 50,//每页条数
          state: '进行中',//表格状态
          userId: '',//当前登陆用户ID
        },
        totalCount: 0,//分页组件--数据总条数
        tags: [
          { name: '使用中', type: '' },
          { name: '维护中', type: 'success' },
          { name: '空闲', type: 'info' },
        ],
        projectData: {
          proId: '',
          stateGoing: '',
          proName: '',
          proContent: '',
          userName: '',
          proCost: '',
          proTime: '',
          proResource: '',
          proState: ''
          // process: "",
          },
        listLoading: false,//数据加载等待动画
        dialogFormVisible: false,//增加按钮弹窗能不能看到
      }
    },
    created() {
      this.listQuery.userId = global.obj.userId;
      this.getList();
    },
    methods: {
      handleClick(tab, event) {
        if(tab.name === "finish")
          this.listQuery.state = "已完成";
        if(tab.name === "unfinish")
          this.listQuery.state = "进行中";
        if(tab.name === "apply")
          this.listQuery.state = "未进行";
        this.getList();

      },
      getList(){
        //查询项目
        this.listLoading = true;
        this.api({
          url: "/project/userProjectList",
          method: "get",
          params: this.listQuery
        }).then(data => {
          this.listLoading = false;
          this.list = data.list;
          this.totalCount = data.totalCount;
        })
      },
      ProjectDoingState($index,stateGoing){
        let project = this.list[$index];
        this.projectData.stateGoing = stateGoing;
        this.projectData.proId = project.proId;
        this.api({
          url: "/project/updateStateGoing",
          method: "post",
          data: this.projectData 
        }).then(() => {
          _vue.getList();
        })
      },
      pauseProject($index) {
        let _vue = this;
        this.$confirm('是否要暂停项目', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let project = _vue.list[$index];
          project.stateGoing = '1';
            this.api({
            url: "/project/updateStateGoing",
            method: "post",
            data: project
            }).then(() => {
              _vue.$message.success("项目已暂停")
              _vue.getList();
          }).catch(() => {
            _vue.$message.error("取消暂停")       
          })
        })
      },
      startProject($index){
        let _vue = this;
        this.$confirm('是否要开始项目', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let project = _vue.list[$index];
          project.stateGoing = '0';
            this.api({
            url: "/project/updateStateGoing",
            method: "post",
            data: project
            }).then(() => {
              _vue.$message.success("项目已进行")
              _vue.getList();
          }).catch(() => {
            _vue.$message.error("取消开始")       
          })
        })
      },
      showProject($index){
        let projects = this.list[$index];
        this.projectData.proName = projects.proName;
        this.projectData.proContent = projects.proContent;
        this.projectData.userName = projects.userName;
        this.projectData.proCost = projects.proCost;
        this.projectData.proTime = projects.proTime;
        this.projectData.proResource = projects.proResource;
        this.dialogStatus = "showProject"
        this.dialogFormVisible = true

      },
      changeApplyProject($index) {
        let projects = this.list[$index];
        this.projectData.proId = projects.proId;
        this.projectData.proName = projects.proName;
        this.projectData.proContent = projects.proContent;
        this.projectData.userName = projects.userName;
        this.projectData.proCost = projects.proCost;
        this.projectData.proTime = projects.proTime;
        this.projectData.proResource = projects.proResource;
        this.dialogStatus = "updateProject"
        this.dialogFormVisible = true
      },
      updateApplyProject(){
        this.api({
          url: "project/updateApplyProject",
          method: "post",
          data: this.projectData 
        }).then(() => {
          this.getList() ;
          this.dialogFormVisible = false ;
        })
      },
      completeProject($index){
        let _vue = this;
        this.$confirm('项目是否完成', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let project = _vue.list[$index];
            this.api({
              url: "/project/updateProjectState",
              method: "post",
              data: project
            }).then(() => {
              _vue.$message.success("项目已完成")
              this.getList()
            })
          }).catch(() => {
            _vue.$message.error("项目进行中")       
          })
      },
      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageRow = val
        this.handleFilter();
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList();
      },
      getIndex($index) {
        //表格序号
        return $index + 1
      }
    }
  }
</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
